<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var HeaderComponent = React.createClass({
      render:function(){        
        return (  <div>
                    <h1>Header Component</h1>
                  </div>
               )
      }
    });

    var ListComponent = React.createClass({
      render:function(){
        
        return (  <div>
                    <h1>List Component</h1>
                  </div>
               )
      }
    });

    var FooterComponent = React.createClass({
      render:function(){
       
        return (  <div>
                    <h1>Footer Component</h1>
                  </div>
               )
      }
    });
    
    /*
        尝试：多次往一个节点渲染组件过程，会出现将最后一个组件渲染之前组件过程
    */
    
    ReactDOM.render( <HeaderComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    ReactDOM.render( <ListComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    ReactDOM.render( <FooterComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )

    /*
        尝试：重新封装一个组件，将之前的组件合并到新组件中去，然后对新组件进行渲染
    */
    /*
    var Cxt = React.createClass({
        render:function(){
            return(
                <div>
                    <HeaderComponent/>
                    <ListComponent/>
                    <FooterComponent/>
                </div>
            )
        }
    })

    ReactDOM.render( <Cxt/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    */
</script>
</body>
</html>